<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:jsf="http://xmlns.jcp.org/jsf"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
                xmlns:ezcomp="http://xmlns.jcp.org/jsf/composite/ezcomp">


    <style>
        .panel-header {
            background-color: #007bff;
            color: white;
            padding: 15px;
            border-bottom: 1px solid #0069d9;
            font-weight: bold;
            font-size: 24px;
            text-align: center;
            border-radius: 5px 5px 0 0;
            margin-bottom: 20px; /* 增加底部间距 */
        }

        .panel-content {
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 0 0 5px 5px;
            margin-top: 20px; /* 增加上方间距 */
        }

        .data-table-header {
            background-color: #f8f9fa;
            font-weight: bold;
            text-align: center;
            border-bottom: 1px solid #dee2e6;
        }

        .data-table-cell {
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #dee2e6;
        }

        .ui-growl {
            z-index: 11000;
        }

        .button-group {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px; /* 增加上方间距 */
            margin-bottom: 20px; /* 增加底部间距 */
        }
    </style>

    <h:form id="biaodanForm">
        <p:panel id="biaodan" styleClass="panel-header">
            <!-- 标题 -->
            <span>1月报销汇总</span>
        </p:panel>

        <div class="button-group">
            <p:commandButton value="查询" icon="pi pi-search" process="@form"
                             update="msg, expenseTable"
                             actionListener="#{mkzbd.bb('biaodan').mc.selectReimbursementSummary}"
                             styleClass="ui-button-primary menu-button"/>
        </div>

        <p:panel id="bdLists" styleClass="panel-content" style="height: calc(100% - 160px); position: relative; overflow: hidden; margin-top: 20px;">
            <!-- 表格 -->
            <p:dataTable emptyMessage="暂无数据" id="expenseTable" var="expense" rowIndexVar="lia" showGridlines="true"
                         stripedRows="true" resizableColumns="true" selectionMode="single" selection="#{mkzbd.bb('biaodan').mc.lbselectrow}"
                         value="#{mkzbd.bb('biaodan').mc.emptyList}" reflow="true" styleClass="p-datatable-sm p-datatable-striped"
                         scrollable="true" scrollHeight="calc(100% - 40px)"
                         rowKey="#{expense.id}" paginator="true" rows="10"
                         paginatorPosition="bottom" rowsPerPageTemplate="10,20,50,100"
                         sortBy="#{expense.time}" sortOrder="descending">

            </p:dataTable>
        </p:panel>
    </h:form>

</ui:composition>